<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="com.webside.points.wechat.Wechat"%>  
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!doctype html>
<html>
<%
	String openId=(String)request.getSession().getAttribute("openId");

	String expertId = request.getParameter("expertId");
	
	String issueId = request.getParameter("issueId");
	
	request.getSession().setAttribute("issueId", issueId);
	request.getSession().setAttribute("expertId", expertId);
%>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" href="../css/amazeui.min.css">
  <link rel="stylesheet" href="../css/wap.css">
  <link rel="stylesheet" href="../css/style.css"/>
  <link rel="stylesheet" href="../css/weui.css" />
  <link rel="stylesheet" href="../css/like.css" />
  <title>打赏</title>
</head>
  <script src="../js/jquery.js"></script>
  <script src="../js/amazeui.min.js"></script>
   <script type="text/javascript"
	src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  	<script src="../js/jssdk.js"></script>
  <script type="text/javascript">
  var $loadingToast=null;
  	$(function(){
		 $.post("${ctx }/user/findByExpertId", {expertId:<%=expertId%>}, function(data, status, xhr){
			$(".headUrl").attr("src",data.headUrl);
			$(".pet_grzx_name").text("打赏"+data.wechatId);
		 },'json'); 
		
  		$(".pet_hd_con_gp_list span").click(function(){
  			$(".pet_hd_con_gp_list span").removeClass("pet_hd_con_gp_list_on");
  			$(this).addClass("pet_hd_con_gp_list_on");
  		});
  	})
  	function rewardPay(amount){
		//$(".pet_hd_con_gp_list_xl_m").removeAttr("onclick");
		if(amount==0){
			alert("打赏金额不能少于0元");
			return;
		}
		
		$loadingToast = $('#loadingToast');
		if ($loadingToast.css('display') != 'none') return;
		$loadingToast.fadeIn(100);
		//var amount = $(e).children("i").text();
		var url="${ctx }/wechat/getRewardOrder";
		var params = {
		  openId:'<%=openId%>',
		  amount:amount
		};
		   
		 $.post(url, params, function(data, status, xhr){
			callbackCharge(data);
		},'json'); 
	}
	 function callbackCharge(data) {
		if (typeof WeixinJSBridge == "undefined") {
			if (document.addEventListener) {
				document.addEventListener('WeixinJSBridgeReady', onBridgeReady,
						false);
			} else if (document.attachEvent) {
				document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
				document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
			}
		} else {
			onBridgeReady(data);
		}
	}
	
	function onBridgeReady(data){
		 $loadingToast.fadeOut(100);
		   //alert(data.package);
		   WeixinJSBridge.invoke('getBrandWCPayRequest', 
		       {
		           "appId"		:data.appId,     //公众号名称，由商户传入     
		           "timeStamp"	:data.timeStamp, //时间戳，自1970年以来的秒数     
		           "nonceStr"	:data.nonceStr,  //随机串     
		           "package"	:data.package,     
		           "signType"	:data.signType,  //微信签名方式：     
		           "paySign"	:data.paySign    //微信签名 
		       },
		       function(res){ 
		       	   // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。   
		       	   //alert(res.err_msg);  
		       	   // $(".pet_hd_con_gp_list_xl_m").attr("onclick","payEvent()");
		           if(res.err_msg == "get_brand_wcpay_request:ok" ) {
		           		//alert("ok");
		           }else if(res.err_msg == "get_brand_wcpay_request:cancel" ){
		           		//alert("cancel");
		           }else if(res.err_msg == "get_brand_wcpay_request:fail" ){
		           		//alert("fail");
		           }
		       }
		   ); 
		}
$(function() {
  $('#doc-prompt-toggle').on('click', function() {
    $('#my-prompt').modal({
      relatedTarget: this,
      onConfirm: function(e) {
        rewardPay(e.data);
      },
      onCancel: function(e) {

      }
    });
  });
});		
var handleMax = function(obj){
	if(obj.value>=10000){
		alert("你输入的金额超过10000，请重新输入 ！");
		obj.value="";
	}
    //修复第一个字符是小数点 的情况.  
    var first='';  
    if(obj.value !=''&& obj.value.substr(0,1) == '.'){  
        obj.value="";  
    }  	  
    obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符  
    obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的       
    obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");  
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数       
    if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额      
        obj.value= parseFloat(obj.value);      
    } 
};
  </script>
<style type="text/css">
	.reward{
		width: 100%;
		margin-top:20px;
	}
	.reward-number{
		position: relative;
		border: 1px solid #22ac38;
		border-radius: 5px;
		display: inline-block;
		width: 25%;
		padding: 12px 10px;
		color: #22ac38;
		margin:10px 3px;
		font-weight:600;
		font-size:18px;
	}
	.reward-font{
		font-size:8px;
	}
	.reward-other{
		padding:25px 20px;
		color:#2597c1;
	}
	.reward-bottom{
		padding-top:40%;
		color:#a7a7a7;
	}
	.headUrl{
		border-radius: 50%;
		width: 80px;
		height: 80px;
		margin-top:20px;
	}
</style>
<body style="background:#ececec">
  <div class="pet_mian" >
    <div class="pet_content pet_content_list pet_hd">
      <div class="pet_article_like">
        <div class="pet_content_main pet_article_like_delete">
          <div data-am-widget="list_news" class="am-list-news am-list-news-default am-no-layout">
            <div class="am-list-news-bd">
				<div class="am-list-news-bd" style="text-align:center">
					 <div >
						<img src="#" class="headUrl">
					 </div>
					 <div class="pet_grzx_name"></div>
				
					<div class="reward">
				      <span class="reward-number" onclick="rewardPay(1)"><i>1</i><font class="reward-font"> 元</font></span>
				      <span class="reward-number" onclick="rewardPay(5)"><i>5</i><font class="reward-font"> 元</font></span>
					  <span class="reward-number" onclick="rewardPay(10)"><i>10</i><font class="reward-font"> 元</font></span>
					  <span class="reward-number" onclick="rewardPay(20)"><i>20</i><font class="reward-font"> 元</font></span>
					  <span class="reward-number" onclick="rewardPay(50)"><i>50</i><font class="reward-font"> 元</font></span>
					  <span class="reward-number" onclick="rewardPay(100)"><i>100</i><font class="reward-font"> 元</font></span>
			    	</div>
					
					<div class="reward-other"> 
						<span id="doc-prompt-toggle">其他金额</span> 
					</div>
					
					<div class="reward-bottom"> 
						<div>
							打赏是对该专家以及中穆问答平台的出散
						</div>
						<div>
							请求安拉回赐你及家人
						</div> 						
					</div>
		        </div>
              </div>

            </div>

          </div>

        </div>
      </div>
 <!--底部-->
    <div data-am-widget="navbar" class="am-navbar am-cf my-nav-footer " id="">
     <ul class="am-navbar-nav am-cf am-avg-sm-4 my-footer-ul">
		<li>
           <a href="${ctx }/user/findUserIssue?issueTypeId=0" class="">
            <span class="am-icon-home"></span>
            <span class="am-navbar-label">首页</span>
          </a>
        </li>
        <li>
          <a href="${ctx }/issueType/findAll?mark=service&openId=<%=openId %>" class="">
            <span class="am-icon-comments"></span>
            <span class="am-navbar-label">提问</span>
          </a>
        </li>
		<li>
          <a href="${ctx }/postType/findAllPostType" class="">
            <span class="am-icon-book"></span>
            <span class="am-navbar-label">学习</span>
          </a>
        </li>
        <li style="position:relative">
          <a href="${ctx }/user/findByOpenId?openId=<%=openId %>" class="">
            <span class="am-icon-user"></span>
            <span class="am-navbar-label">我的</span>
          </a>
        </li>
      </ul>
</div>
    </div>
<div class="page">
    <div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">数据加载中</p>
        </div>
    </div>
</div>


<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">其它金额</div>
    <div class="am-modal-bd">
      <input class="weui-input am-modal-prompt-input" type="number" onkeyup="handleMax(this)" pattern="[0-9]*" required placeholder="请输入金额" >
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>确认</span>
    </div>
  </div>
</div>
    <script src="../js/text-calculation.js"></script>
</body>
  </html>